<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/topLogo.css" />
		<style type="text/css">
			html,
			body,
			.mui-content {
				height: 100%;
			}
			
			.infoButtom {
				height: 40px;
			}
			
			#updateArea {
				display: block;
			}
			
			.update-info {
				overflow: auto;
				position: absolute;
				width: 100%;
				bottom: 60px;
				top: 250px;
			}
			
			.update-info h5 {
				color: #333333;
				margin: 5px 10%;
			}
			
			.update-title {
				width: 80%;
				margin: 0 10%;
				padding: 5px 0;
				color: #333;
			}
			
			.update-title span {
				margin: 0 4px;
			}
			
			.update-info h5 {
				padding: 5px 0;
			}
			
			.update-info .update-log p.title {
				color: #333333;
				margin-left: 10%;
				margin-top: 10px;
			}
			
			.update-info .update-log p#desc {
				word-wrap: break-word;
				width: 70%;
				margin: 0 15% 10px;
				line-height: 25px;
			}
			
			p.download-info {
				position: absolute;
				bottom: 35px;
				width: 80%;
				margin: 0 10%;
				color: #333;
				display: none;
			}
			
			#process p {
				position: absolute;
				bottom: 18px;
				width: 80%;
				margin: 0 10%;
			}
			
			#process p span {
				background-color: #CCCCCC;
				height: 4px;
			}
			
			#process p span span {
				background-color: #f6047f;
			}
			
			.mui-btn.btn-outlined {
				position: absolute;
				bottom: 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bar-inverse">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">检查更新</h1>
		</header>
		<div class="mui-content">
			<div class="infoTop">
				<img src="../images/icon/logo.png" />
			</div>
			<div class="infoButtom"></div>
			<div id="updateArea">
				<p class="update-title">
					发现新版本：51帮办<span id="version"></span><br />
					大小：<span id="size"></span><span id="publictime" class="mui-pull-right"></span>
				</p>
				<div class="update-info">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll update-log">
							<p class="title">更新日志</p>
							<p id="desc"></p>
						</div>
					</div>
				</div>
				<button class="mui-btn btn-block btn-outlined">立即更新</button>
				<p class="download-info" id="processInfo"></p>
				<div id="process" class="mui-text-center"><p></p></div>
			</div>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui('.mui-scroll-wrapper').scroll();
			// 显示更新信息，下载进度等
			var updateArea = document.getElementById("updateArea");
			// 下载进度条
			var container = mui("#process p");
			// 下载进度提示栏
			var processInfoElem = document.getElementById("processInfo");
			// 下载任务
			var dtask = null;
			// 初始化显示
			var checkElem = Common.showState(updateArea, '', '正在检查更新', 40);
			var updating = false; // 下载更新状态
			mui.plusReady(function() {
				var url = baseURL + 'version/checkUpdate/1/' + plus.runtime.version + '.json';
//				var url = baseURL + 'version/checkUpdate/1/1.0.0.json';
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1 || data.code == 0) {
						Common.showState(checkElem, '&#xe60a;', '当前已经是最新版本', 20);
					} else if (data.code == 2){
						$.each(data.version, function(i, o) {
							if(!/^(apppath|appsize|isNew|type|vid)$/.test(i)) {
								$("#" + i).text(o);
							} else {
								switch(i) {
									case 'apppath':
										dtask = plus.downloader.createDownload(baseURL + o, { method: "GET" });
										dtask.addEventListener("statechanged", function(task, status) {
										switch (task.state){
											case 1: // 开始
												break;
											case 2: // 已连接到服务器
												break;
											case 3: // 已接收到数据
												var ready = Common.bytesToSize(task.downloadedSize);
												var totle = Common.bytesToSize(task.totalSize);
												var percent = (task.downloadedSize / task.totalSize * 100);
												$(processInfoElem).text('下载中  ' + ready + " / " + totle + ' ( ' + percent.toFixed(0) + ' % )');
												mui(container).progressbar().setProgress(percent.toFixed(1));
												break;
											case 4: // 下载完成
												updating = false;
												console.log(JSON.stringify(task));
												console.log(JSON.stringify(status));
												if(status == 200) {
													$(processInfoElem).text('下载完成，准备安装');
													setTimeout(function() {
														plus.runtime.install(task.filename, {}, function(widgetInfo) {
															console.log(JSON.stringify(widgetInfo));
														}, function(error) {
															console.log(JSON.stringify(error));
														});
													}, 1000);
												} else {
													container.progressbar().hide();
													$(processInfoElem).hide();
													$('button').show();
													mui.toast('下载失败，请稍后再试');
												}
												break;
											default:
												break;
										}
									})
										break;
									case 'appsize':
										$("#size").text(Common.bytesToSize(o));
										break;
									case 'version_num':
										$("#version").text('v' + o);
										break;
									default:
										break;
								}
							}
						});
						$(checkElem).hide();
						$(updateArea).show();
					} else {
						mui.toast('加载失败，请稍后再试');
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				mui('.mui-content').on('tap', 'button', function() {
					var netState = plus.networkinfo.getCurrentType();
					if(netState == 4 || netState == 5 || netState == 6) {
						plus.nativeUI.confirm("当前正在使用移动数据网络，是否继续下载更新", function(e) {
							if(!e.index) {
								mui.toast(1);
								update();
							} else {
								mui.toast(2);
							}
						}, '', ["确定", "取消"]);
					} else {
						mui.toast(3);
						update();
					}
				})
				
				function update() {
					updating = true;
					$('button').hide();
					dtask.start();
					$(processInfoElem).show().text('准备下载');
					mui(container).progressbar({
						progress: 0
					}).show();
				}
				
				var oldBack = mui.back;
				
				mui.back = function() {
					if(updating) {
						plus.nativeUI.confirm("尚未完成更新，是否返回？", function(e) {
							if(!e.index) {
								oldBack();
							}
						}, '', ["确定", "取消"]);
					} else {
						oldBack();
					}
				};
			})
		</script>
	</body>

</html>